<template>
  <div class="userlist-wrap">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input @keyup.enter.native="onSubmit"  v-model="input" placeholder="请输入查询内容"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
      </el-col>
    </el-row>
    <el-table
            :data="tableData"
            border
            style="margin: 22px 0;"
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
    >
      <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
      <el-table-column prop="name" label="用户名" align="center"></el-table-column>

      <el-table-column label="头像(查看大图)" align="center">
        <template slot-scope="scope">
          <el-image
                  style="width: 60px;height: 60px;"
                  :src="scope.row.avatar"
                  :preview-src-list="[scope.row.avatar]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="电话" align="center"></el-table-column>
      <el-table-column prop="area" label="所在城市" align="center"></el-table-column>
      <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
      <el-table-column label="状态" align="center" width="180">
        <template slot-scope="scope">
          <el-switch
                  @change="switch_change(scope.row)"
                  active-value="1"
                  inactive-value="0"
                  v-model="scope.row.status"
                  active-text="启动"
                  inactive-text="拉黑">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="created_at" width="180" label="注册时间" align="center"></el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
                  type="text"
                  icon="el-icon-calendar"
                  @click="handleEdit(scope.$index, scope.row)"
          >用户订单</el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.page"
            :page-size="query.limit"
            :total="query.total"
            @current-change="handlePageChange"
    ></el-pagination>


  </div>
</template>

<script>
export default {
  name: 'userlist',
  data () {
    return {

      pageTotal: 20,
      input: '',
      page: 1,
      tableData: [],
      query: {
        limit: 10,
        page: 2
      }
    }
  },
  methods: {

    handleEdit(i, item) {
      this.$router.push({
        path: 'orderlist',
        query: {
          mobile: item.mobile
        }
      })
    },
    onSubmit() {
      this.page = 1
      this.basicFun()
    },
    handlePageChange (page) {
      this.page = page
      this.basicFun()
    },
    switch_change(row) {
      this.$http.put('api/admin/status/User/' + row.id, { status: row.status}).then(r => {
        this.basicFun()
      })
    },
    basicFun () {
      this.$http.get('api/admin/users', {params: {page: this.page, keyword: this.input}}).then(r => {
        this.tableData = r.data.data.data
        this.tableData.forEach(item =>{
          item.status = item.status + ''
        })
        this.query = r.data.data.meta
      })
    }
  },
  created () {
    this.basicFun()
  }
}
</script>

<style scoped lang="less">
.userlist-wrap{
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
<style lang="less">
  .table-header{
    font-weight: bold;
  }
</style>
<style lang="less">
  .tag-label{
    cursor: pointer;
  }
</style>
